<template>
  <div class="newsEnclosure">
    <el-table
      :data="fileList"
      style="font-size: 14px"
      :header-cell-style="{ fontSize: '14px' }"
      height="300"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" type="index" width="70" align="center"> </el-table-column>
      <el-table-column
        v-for="(column, index) in columnData"
        :key="index"
        :prop="column.prop"
        :label="column.title"
        :align="column.align"
        :width="column.width"
        :sortable="column.sortable"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template #default="scope">
          <el-button type="text" size="small" @click="handlePreview(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { downloadMethod } from '@/utils/utils'
import { ElMessageBox } from 'element-plus'
import { CHECC_API_BASE_DATA } from '@/constants/proxy'

export default {
  props: {
    Enclosure: Object,
  },
  data() {
    return {
      columnData: [
        //表头数据
        { title: '附件名称', prop: 'fileName', align: 'center' },
      ],
      multipleSelection: [], //选中项
      id: '',
      myHeaders: { Authorization: 'Bearer ' + getToken() },
      fileList: [], //上传的文件
    }
  },
   watch: {
      Enclosure(){
        if (this.Enclosure) {
          this.fileList = this.Enclosure;
        }
      }
   },
  methods: {
    handlePreview(file) {
      ElMessageBox({
        title: '提示',
        message: '确定要下载吗?',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        closeOnClickModal: false,
        type: 'warning',
      }).then(() => {
        downloadMethod({
          method: 'get',
          url: '/checc-api/fastdfs/file/download',
          fileName: file.fileName,
          params: 'fileId=' + file.fileId,
        })
      })
    },
  },
  mounted() {
    if (this.Enclosure) {
      this.fileList = this.Enclosure
    }
  },
}
</script>
<style lang="scss" scoped>
.newsEnclosure {
  width: 50%;
}
.upload-demo {
  display: inline-block;
  margin-left: 10px;
}
</style>
